<template>
	<div class="app-container">

		<section>
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="formInline">
					<el-form-item>
						<el-button type="danger">15天以上</el-button>
						<el-button type="success">5天-15天</el-button>
						<el-button type="warning">3天-5天</el-button>
						<el-button type="primary">3天以内</el-button>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="formInline.status" filterable placeholder="请选择">
							<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<el-table :data="tableData" border style="width: 100%" >
				<el-table-column prop="Province" label="省份" align="center">
				</el-table-column>
				<el-table-column prop="City" label="市区" align="center">
				</el-table-column>
				<el-table-column prop="Shop" label="店" align="center">
					<!--<template slot-scope="scope">
						<el-button type="primary" @click="handleShops">店铺名称</el-button>
					</template>-->
				</el-table-column>
				<el-table-column prop="Message" label="消息" align="center">
				</el-table-column>
				<el-table-column prop="Date" label="时间" align="center">
				</el-table-column>
				<el-table-column prop="Status" label="状态" align="center">
				</el-table-column>
				<el-table-column prop="Due" label="处理" align="center">
					<template slot-scope="scope">
						<el-button type="primary">已阅</el-button>
					</template>
				</el-table-column>

			</el-table>

			<el-pagination background layout=" prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;margin-top: 10px;">
			</el-pagination>

		</section>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					status: ""
				},
				status: [{
					value: '1',
					label: '亟待处理'
				}, {
					value: '2',
					label: '需处理'
				}, {
					value: '3',
					label: '无需处理'
				}, {
					value: '4',
					label: '可忽略'
				}],

				page: 1,
				pageSize: 20,
				total: 10000000000,

				tableData: [{
					Province: "湖南省",
					City: "长沙市",
					Message: "配送货物遗失",
					Date: '2016-06-05',
					Shop: "王府井01号",
					Status: "亟待处理"
				}, {
					Province: "湖北省",
					City: "武汉市",
					Message: "配送货物遗失",
					Date: '2016-06-05',
					Warehouse: "杭州——松兴",
					Shop: "国金街05号",
					Income: "152124",
					Profit: "2122453",
					Settlement: "234313",
					Status: "需处理"
				}, {
					Province: "广东省",
					City: "深圳市",
					Message: "配送货物遗失",
					Date: '2016-06-05',
					Warehouse: "杭州——松兴",
					Shop: "王府井03号",
					Income: "152124",
					Profit: "2122453",
					Settlement: "234313",
					Status: "无需处理"
				}, {
					Province: "四川省",
					City: "成都市",
					Message: "配送货物遗失",
					Date: '2016-06-05',
					Warehouse: "杭州——松兴",
					Shop: "王府井04号",
					Income: "152124",
					Profit: "2122453",
					Settlement: "234313",
					Status: "可忽略"
				}],

			};
		},
		methods: {

			handleCurrentChange(val) {
				this.page = val;
			},

		}

	};
</script>

<style>
	/*.el-input--medium .el-input__inner {
		height: 36px;
		line-height: 36px;
		width: 200px;
	}
	
	.el-form-item__label {
		line-height: 36px;
		width: 100px;
	}
	.el-pagination__editor.el-input .el-input__inner {
    height: 28px;
    width: 40px;
}*/
</style>